<template>
	<my-search @click="goSearch"></my-search>
	<view class="catePage">
		<!--左侧滚动区域-->
		<scroll-view class="scroll-left-contenter" scroll-y="true"  :style="{height:vm+'px'}">
			<view v-for="(item, index) in cateList" :key="index" :class="[index==active? 'active' : '']"@click="changeNav(index)">{{item.cat_name}}</view>
		</scroll-view>
		<!--右侧滚动区域-->
		<scroll-view class="scroll-right-contenter" scroll-y="true" :style="{height:vm+'px'}" :scroll-top="scrollTop">
			<!-- 二级列表 -->
			<view class="cate2Floor" v-for="(tem, num) in cate2List" :key="num+'a'">
				<view class="cate2Floor-title">/ {{tem.cat_name}} /</view>
				<!-- 三级列表 -->
				<view class="cate3Floor">
					<view class="cate3Floor-item" v-for="(pro, count) in tem.children" :key="count+'b'" @click="toGoodsDetail(pro)">
						<image :src="pro.cat_icon" mode=""></image>
						<view class="cate3Floor-title">{{pro.cat_name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import badgeMixins from "@/mixins/badge.js"
	export default {
		mixins:[badgeMixins],
		data() {
			return {
				// 总的列表
				cateList: [],
				// 二级列表
				cate2List: [],
				// 页面高度
				vm: 0,
				// 选中的导航
				active: 0,
				// 滚到顶部
				scrollTop: 0,
			};
		},
		
		onLoad(options){
			// 把搜索框的高度减掉
			this.vm = uni.getSystemInfoSync().windowHeight - 50
			this.getCateList()
		},
		methods:{
			// 获取页面数据
			async getCateList(){
				const {data:res} = await uni.$http.get(uni.api.CATEGOREIS)
				if(res.meta.status !== 200) return uni.$showMsg();
				this.cateList = res.message
				this.cate2List = res.message[this.active].children
				console.log('cate', res)
			},
			// 更换导航
			changeNav(index){
				this.active = index;
				this.cate2List = this.cateList[index].children
				// 如果这一次的scrollTop与上一次的值相同则不会发生滚动
				this.scrollTop = this.scrollTop==0? 1 : 0;
			},
			// 点击跳转商品列表页
			toGoodsDetail(item){
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?cid='+item.cat_id
				})
			},
			// 点击跳转搜索页面
			goSearch(){
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
.catePage{
	display: flex;
	flex-direction: row;
	background: #eeeeee;
	
	.scroll-left-contenter{
		width: 300rpx;
		
		view{
			height: 80rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 80rpx;
			
			&.active{
				background-color: #fff;
				font-weight: bold;
				position: relative;
				
				&::before{
					content:' ';
					position: absolute;
					top: 50%;
					left: 0;
					width: 3px;
					height: 80rpx;
					background: #c00000;
					transform: translate(0, -50%);
				}
			}
		}
		
	}
	.scroll-right-contenter{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		.cate2Floor{
			.cate2Floor-title{
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				font-weight: bold;
				padding: 30rpx 0;
			}
			.cate3Floor{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.cate3Floor-item{
					width: 33.33%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-bottom: 20rpx;
					image{
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 10rpx;
					}
					.cate3Floor-title{
						font-size: 24rpx;
						text-align: center;
						
					}
				}
			}
		}
	}
}
</style>
